.MarkDown {
  // 瀑布流布局

  width: 100%;

  :global {
    .my-masonry-grid {
      display: flex;
      margin-left: -16px; /* 列之间的负间距，修正效果 */
      width: auto;
    }
    .my-masonry-grid_column {
      padding-left: 16px; /* 列之间的间距 */
      background-clip: padding-box;
    }
    .ant-card {
      border: none;
      break-inside: avoid; //为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。
      width: 227px !important;
    }
    .ant-card:hover {
      box-shadow: none;
    }

    .ant-card-cover {
      border-radius: 10px;

      img {
        border-radius: 10px;
      }
    }

    .ant-card-cover:hover {
      cursor: pointer;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      transition: box-shadow 0.2s;
    }

    .ant-card:hover {}

    :where(.css-dev-only-do-not-override-qnu6hi).ant-card-hoverable {
      cursor: auto;
      transition: none;
    }

    .ant-card-body {
      padding: 0;
    }
  }

  .public {
    position: relative;
    box-sizing: border-box;
    padding: 10px 10px 10px ;
    :global{
      .lock{
        position: absolute;
        top: -30px;
        color: #000;
      }
    }
    .Info {
      padding: 0 5px;
      margin-top: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // img {
      //   margin-right: 15px;
      //   width: 30px;
      //   height: 30px;
      //   border-radius: 30px;
      // }
      span{
        color: #5c5c5c;
      }
      :global {
        .user {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
.CardModal{
  :global{
    .ant-modal-content{
      padding: 0 !important;
      overflow: hidden;
      border-radius: 20px;
    }
    .ant-modal-body{
      .left{
        width: 600px;
        height: 850px;
        .imgCard{
          width: 600px;
          height: 850px;
          overflow: hidden;
          :global{
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
      .right{
        display: flex;
        position: relative;
        flex-direction: column;
        padding: 24px 24px 0 24px;
        width: 400px;
        height: 850px;
        box-sizing: border-box;
        :global{
          .delPublic{
            font-size: 20px;
            position: absolute;
            right: 20px;
            // display: flex;
            cursor: pointer;
          }
        }
        .top{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .TopLeft{
             display: flex;
             align-items: center;
             h3{
              margin-left: 20px;
             }
            img{
              width: 50px;
              height: 50px;
              border-radius: 50%;
              object-fit: cover;
            }
            
          }
        }
        .text{
          margin-top: 20px;
          padding: 0 0 10px;
          border-bottom: 1px solid #ebebeb;
          p{
            margin-top: 5px;
          }
        }
      }
    }
      .review{
        scrollbar-width: none;
        position: relative;
        overflow: auto;
        flex-grow: 1;
        :global{
          .ant-image{
            width: 150px;
          }
          .no-review{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            p{
              margin-top: 5px;
              text-align: center;
            }
          } 
        }
        .topReview{
          color: red;
        }
        .item{
          display: flex;
          padding: 10px 0;
        }
        .reviewLeft{
          margin-right: 10px;
         
        }
        .reviewRight{
          p:nth-child(1){
            color: red;
          }
          span{
            color: #000;
            margin-right: 15px;
            cursor: pointer;
          }
          span:hover{
            color: red;
          }
        }
      }
      .review::-webkit-scrollbar{
        display: none;
      }
    .publish{
      display: flex;
      box-sizing: border-box;
      border-top: 1px solid #ececec;
      padding: 20px 0;
      :global{
        :where(.css-dev-only-do-not-override-qnu6hi).ant-form{
          flex: 1;
        }
        :where(.css-dev-only-do-not-override-qnu6hi).ant-form-item{
          margin-bottom: 0;
        }
      }
    }
  }  
}
